<template>
  <div class="menu-bar">
    <el-menu
      :default-active="menuIndex"
      class="el-menu-vertical"
      background-color="#283E51"
      text-color="#fff"
      :unique-opened="true"
      :collapse="isCollapse"
      @select="selectMenu"
    >
      <!--循环加载单级菜单-->
      <el-menu-item
        v-for="(item, index) in presentRouter"
        :index="String(index)"
        :key="index"
        v-if="item.isMenu && !item.subLevel"
      >
        <router-link class="menu-router-link" :to="item.path"   @mousedown.native="changepage">
          <i :class="item.icon"></i>
          <span class="menu-name">{{ item.title }}</span>
        </router-link>
      </el-menu-item>
      <!--判断条件是否存在子级 存在子级则加载二级菜单-->
      <el-submenu
        v-else-if="item.subLevel"
        :index="String(index)"
        :key="index + item"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span class="menu-name">{{ item.title }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="(em, i) in item.subLevel"
            :key="item.id"
            :index="index + '-' + i"
          >
            <router-link class="menu-router-link" :to="em.path"  @mousedown.native="changepage">
              <span class="menu-name">{{ em.title }}</span>
            </router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import { admin } from "@/router";

export default {
  props: ["isCollapse"],
  data() {
    return {
      // 当前的路由
      presentRouter: [],
      // 菜单默认激活的 index
      menuIndex: "0"
    };
  },
  mounted() {
    // 取出本地的 menuIndex 进行默认赋值
    // this.menuIndex = String(
    //   sessionStorage.getItem(this.$apis.getLocalKey().menuIndex) || 0)
    this.menuIndex = String(
      sessionStorage.getItem(this.$apis.getLocalKey().menuIndex) || "0"
    );

    // console.log(  this.menuIndex )
    // 初始化
    this.init();
  },
  methods: {
    init() {
      const ROLE_NAME = ["admin"];
      //TODO
      // 获取 role
      const getRole = localStorage.getItem(this.$apis.getLocalKey().role);
      // console.log('getRole===========', getRole)
      if (ROLE_NAME.includes(getRole)) {
        switch (getRole) {
          case "admin":
            this.presentRouter = admin.children;
            break;
        }
        // console.log(this.presentRouter)
      }
    },
    // 当菜单激活改变
    selectMenu(index) {
      // console.log(index)
      // 将当前激活的菜单 id 存入本地
      sessionStorage.setItem(this.$apis.getLocalKey().menuIndex, index);
    },
		changepage() {
		  // console.log(1)
		  localStorage.setItem("page", 1);
			localStorage.setItem('size',10)
		  // console.log(localStorage.getItem("page"))
		}
  }
};
</script>

<style scoped lang="scss">
.menu-bar {
  width: 100%;
  height: max-content;
}

.menu-router-link {
  padding: 0 30px !important;
}

.menu-name {
  // margin-left: 10px;
}

.el-menu {
  width: 190px;
  border-right: 0;
}

.el-menu--collapse {
  width: 64px !important;
}

.menu-bar a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.el-menu-item i {
  display: inline-block;
  width: 20px;
  // height: 14px;
  height: 20px;
}
</style>
